<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'adminAppver.add'">创建</el-button>
    <div class="filter-container">
      <el-input style="width: 250px" placeholder="输入app名称/版本按回车查询" clearable prefix-icon="el-icon-search"
        class="filter-item" @keyup.enter.native="research" @clear="research" v-model="query.queryString"></el-input>
      <el-select v-model="query.system" class="filter-item" clearable placeholder="请选择系统">
        <el-option label="ALL" value="all"></el-option>
        <el-option label="IOS" value="ios"></el-option>
        <el-option label="Android" value="android"></el-option>
      </el-select>
      <el-select v-model="query.install_type" class="filter-item" clearable placeholder="请选择安装类型">
        <el-option label="全量包" value="1"></el-option>
        <el-option label="增量包" value="2"></el-option>
      </el-select>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:content="v">
        <template v-if="v.key === 'system'">
          <span>{{ systemMap[v.row[v.key]] }}</span>
        </template>
        <template v-else-if="v.key === 'install_type'">
          <span>{{ typeMap[v.row[v.key]] }}</span>
        </template>
        <span v-else>{{ v.row[v.key] }}</span>
      </template>
      <template v-slot:operation="v">
        <a href="#" class="text-blue" @click.prevent="editItem(v.row,v.$index)" v-permission="'adminAppver.edit'">编辑</a>
        <span>&nbsp;</span>
        <a href="#" class="text-green" @click.prevent="copyItem(v.row,v.$index)" v-permission="'adminAppver.add'">复制</a>
        <span>&nbsp;</span>
        <a href="#" class="text-red" @click.prevent="deleteItem(v.row,v.$index)"
          v-permission="'adminAppver.delete'">删除</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  components: {},
  name: 'adminAppver',
  data: function () {
    return {
      api: this.$api.appVersion,
      // apiCreate: this.$api.appVersion + 'addormodify',
      apiEdit: this.$api.appVersion + 'update',
      name: 'App版本',
      systemMap: { all: 'ALL', android: 'Android', ios: 'IOS' },
      typeMap: { 1: '全量包', 2: '增量包' },
      columns: [
        { title: 'App代号', key: 'app_id', width: 120 },
        { title: '资源包说明', key: 'app_name', width: 140 },
        { title: '系统', key: 'os', width: 100 },
        { title: '安装类型', key: 'install_type', width: 100 },
        { title: '版本', key: 'version', width: 120 },
        { title: '全量包', key: 'pkg_url', width: 120 },
        { title: '增量包', key: 'wgt_url', width: 120 },
        { title: '版本更新说明', key: 'version_notes', width: 220 },
        { title: '最后修改', key: 'modify_user', width: 90 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [
        { title: 'App代号', key: 'app_id', required: true, span: 12 },
        { title: '资源包说明', key: 'app_name', required: true, span: 12 },
        {
          title: '系统',
          key: 'os',
          name: 'select',
          events: {
            change: this.systemChange,
          },
          options: [
            { value: 'all', label: 'ALL' },
            { value: 'android', label: 'Android' },
            { value: 'ios', label: 'IOS' },
          ],
          props: { placeholder: '选择系统' },
          required: true,
          span: 12,
        },
        {
          title: '安装类型',
          key: 'install_type',
          name: 'select',
          events: {},
          options: [
            { value: 1, label: '全量包' },
            { value: 2, label: '增量包' },
          ],
          props: { placeholder: '选择安装类型' },
          required: true,
          span: 12,
        },
        { title: '版本', key: 'version', span: 12, required: true },
        {
          title: '全量包',
          key: 'pkg_url',
          required: false,
          span: 24,
          hidden: true,
        },
        {
          title: '增量包',
          key: 'wgt_url',
          required: false,
          span: 24,
          hidden: true,
        },
        {
          title: '版本更新说明',
          key: 'version_notes',
          name: 'textarea',
          required: true,
          span: 24,
        },

        { title: '备注', key: 'remarks', name: 'textarea', span: 24 },
      ],
      tableProps: {
        border: true,
        opsColWith: 120,
      },
      typeOptions: [],
    }
  },
  methods: {
    copyItem(v) {
      this.data = _.cloneDeep(this.initData)
      this.pageLoading = true
      this.$request(this.api + 'getbyid', {
        id: v.id,
      })
        .then((r) => {
          this.pageLoading = false
          this.data = this.formatAfterGet(r)
          this.data.id = null
          this.editFormVisible = true
        })
        .catch(() => {
          this.pageLoading = false
        })
    },
    systemChange(value) {
      let tmp = this.fields.find((i) => i.key === 'install_type')
      if (value == 'all') {
        this.data['install_type'] = 2
      } else {
        tmp.options.forEach((i) => {
          i.disabled = false
        })
      }
    },
    formatBeforeSave(data) {
      let tmp = _.cloneDeep(data)
      if (tmp.install_type == 1) delete tmp.wgt_url
      else delete tmp.pkg_url
      return tmp
    },
    submit() {
      let insertUrl = this.api + 'add'
      let updateUrl = this.apiEdit
      let url = this.data.id ? updateUrl : insertUrl
      let data = this.formatBeforeSave(this.data)
      let check = this.validataData(this.fields, this.data)
      if (!check) return
      this.submitLoading = true
      this.$request(url, data, 'post')
        .then((r) => {
          this.$message.success('操作成功')
          this.editFormVisible = false
          this.getList()
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
  },
  watch: {
    data(nv) {
      this.getFieldConfig('pkg_url').hidden = nv.install_type == 2
      this.getFieldConfig('pkg_url').required = nv.install_type == 1
      this.getFieldConfig('wgt_url').hidden = nv.install_type == 1
      this.getFieldConfig('wgt_url').required = nv.install_type == 2
    },
  },
  created: function () {
    this.getList()
  },
}
</script>
<style scoped>
</style>
